<template>
  <div class="container pt-60">
    <h1>打造现象级爆品</h1>
    <div class="inner clearfix">
      <div class="supply_goods_fl fl clearfix"  v-for="(item,index)
       in products"
           v-bind:key="index" :class="{hide: isActive!== index}">
        <div class="supply_goods_fl_img fl">
          <img :src="item.img" alt="">
        </div>
        <div class="supply_goods_fl_content fr">
          <h1>{{item.name}}</h1>
          <div>{{item.intro}}</div>
        </div>
      </div>

      <ul class="supply_goods_fr  fl">
        <li  @mouseover="mouseOver(index)"
            v-for="(item,index) in products" v-bind:key="index" :class="{active: isActive === index}" >
          <img :src="item.img" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Product.vue",
    methods:{
      mouseOver:function (index) {
        this.isActive = index;
      }
    },
    data() {
      return {
        isActive: 1 ,
        products: [
          {
            name: "55度杯",
            intro: "55度开创了全新的降温杯品类，滚烫的开水摇晃后就可以降至55摄氏度。它创造性的设计，改变了我们对于喝开水这一个痛点。一夜间打造出受市场热捧的现象级爆品，创造了品牌推广与销售的奇迹。并一举斩获2015年度德国红点设计大奖。我们自主研发了55度杯的产品定义、设计、结构、生产，产品一经面世就并引爆市场，快速增长至50亿市值。",
            img: require("../../assets/b1.jpg")
          },
          {
            name: "雷迪奥黑玛瑙",
            intro: "雷迪奥创意型LED显示屏可广泛应用于各种大型活动、展览会及地标建筑等，目前得到国内外多个大型演唱会和展览会的预定,具有装卸快捷、使用便利等优势。我们采用了大项目管理制度，从内部结构排布上压缩，运用CNC精细科学数字化加工处理，误差小于0.1MM, 可做到任意尺寸无缝拼接。雷迪奥黑玛瑙一路走来斩获了全球各项大奖，IF金奖、Good Design Best 100、红点、红星等等。我们帮助客户公司树立了产品标杆，并成功签约多个知名品牌。",
            img: require("../../assets/b2.jpg")
          },
          {
            name: "小心眼",
            intro: "小心眼眼部护理套装专为年轻“低头族”提供全方位护眼服务。国内传统的护眼用品多为药物配方，而“小心眼护眼组合”里，洗眼液、眼膜、护眼胶囊、洗眼杯中四款产品每款都是为日常护理所设计。我们为客户提供了外观设计、结构设计、模具设计与制作、生产供货、项目管理的一站式供应链管理服务，从人机交互角度出发，定义一种便捷卫生、易于携带、轻松舒适的全套护眼产品，产品上市后，一举获得红星奖 、台湾金点奖等设计大奖的金奖角逐，在众筹期间，横扫淘宝各大首页版块，众筹金额节节攀登，短短几日里，不仅粉丝超过千人，众筹也超额 200% 成功完成。",
            img: require("../../assets/b3.jpg")
          },
          {
            name: "科大讯飞晓译翻译机",
            intro: "一款堪比同声翻译的智能便携翻译机，让语言不再成为沟通的阻碍。我们从产品设计、研发到生产供货，配合最智能的语音技术使产品更精准化，智能化。作为一款创新的智能翻译机，产品一经面世就备受好评，晓译翻译机在2016年科大讯飞年度发布会上亮相时，当时的科大讯飞轮值总裁胡郁用这款神器和外国友人进行了一番中英文之间的无障碍交流，技惊四座。",
            img: require("../../assets/b4.jpg")
          }
        ],

      }
    }
  }
</script>

<style scoped>
  .pt-60 {
    padding-top: 60px;
  }

  .pb-60 {
    padding-bottom: 60px;
  }

  .container {
    width: 100%;
    background: #fff;
  }

  h1 {
    font-size: 44px;
    margin-bottom: 60px;
    color: #1e1e1e;
    text-align: center;
    font-weight: 400;
  }

  .inner {
    width: 1200px;
    margin: 0 auto;
  }

  .fl {
    float: left;
  }
  .fr{
    float: right;
  }

  .hide {
    display: none;
  }

  .show {
    display: block;
  }

  .supply_goods_fl {
    width: 1090px;
    height: 400px;
    background: #fff;
    margin-right: 14px;
    margin-bottom: 60px;
  }

  .supply_goods_fr {
    width: 92px;
    height: 400px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .supply_goods_fr ul{
    list-style: none;
  }
  .supply_goods_fr li {
    cursor: pointer;
    width: 92px;
    height: 92px;
    border: 1px solid #f5f5f5;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "微软雅黑",Arial;
    font-size: 14px;
    color: #666;
  }
  .supply_goods_fr li img{
    width: 100%;
    height: auto;
  }
  .supply_goods_fr li.active {
    border: 2px solid #16aaf4;
  }
  .clearfix:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
  }
  .supply_goods_fl_content {
    box-sizing: border-box;
    width: 690px;
    height: 400px;
    border: 1px solid #eee;
    border-left: none;
    padding-top: 60px;
    padding-left: 65px;
    padding-right: 65px;
  }
 .supply_goods_fl_content div{
   font-size: 15px;
   color: #666;
   line-height: 30px;
   text-align: left;
  }
  .supply_goods_fl_content h1 {
    font-size: 26px;
    margin-bottom: 34px;
    color: #1e1e1e;
    text-align: center;
    font-weight: 400;
  }

</style>